ரியாக்டின் `useEvent` ஹூக்கை (நிலைப்படுத்தல் அல்காரிதம்) கண்டறியுங்கள்: செயல்திறனை மேம்படுத்துங்கள் மற்றும் நிலையான ஈவென்ட் ஹேண்ட்லர் குறிப்புகளுடன் பழைய குளோசர்களைத் தடுக்கவும். சிறந்த நடைமுறைகள் மற்றும் நடைமுறை உதாரணங்களைக் கற்றுக்கொள்ளுங்கள்.
React useEvent: வலுவான பயன்பாடுகளுக்கு ஈவென்ட் ஹேண்ட்லர்களை நிலைப்படுத்துதல்
ரியாக்டின் ஈவென்ட் கையாளும் முறை சக்தி வாய்ந்தது, ஆனால் அது சில சமயங்களில் எதிர்பாராத நடத்தைகளுக்கு வழிவகுக்கும், குறிப்பாக செயல்பாட்டுக் கூறுகள் மற்றும் குளோசர்களைக் கையாளும்போது. `useEvent` ஹூக் (அல்லது, பொதுவாக, ஒரு நிலைப்படுத்தல் அல்காரிதம்) என்பது பழைய குளோசர்கள் மற்றும் தேவையற்ற மறு-ரெண்டர்கள் போன்ற பொதுவான சிக்கல்களைத் தீர்ப்பதற்கான ஒரு நுட்பமாகும், இது உங்கள் ஈவென்ட் ஹேண்ட்லர் செயல்பாடுகளுக்கு ரெண்டர்கள் முழுவதும் ஒரு நிலையான குறிப்பை உறுதி செய்வதன் மூலம். இந்தக் கட்டுரை `useEvent` தீர்க்கும் சிக்கல்களை ஆராய்ந்து, அதன் செயலாக்கத்தை விளக்கி, ரியாக்ட் டெவலப்பர்களின் உலகளாவிய பார்வையாளர்களுக்கு ஏற்ற நிஜ உலக உதாரணங்களுடன் அதன் நடைமுறைப் பயன்பாட்டைக் காட்டுகிறது.
பிரச்சனையைப் புரிந்துகொள்ளுதல்: பழைய குளோசர்கள் மற்றும் தேவையற்ற மறு-ரெண்டர்கள்
தீர்வுக்குள் செல்வதற்கு முன், `useEvent` தீர்க்க முற்படும் சிக்கல்களைத் தெளிவுபடுத்துவோம்:
பழைய குளோசர்கள்
ஜாவாஸ்கிரிப்டில், ஒரு குளோசர் என்பது ஒரு செயல்பாட்டின் தொகுப்பாகும், அது அதன் சுற்றியுள்ள நிலையின் (லெக்சிகல் சூழல்) குறிப்புகளுடன் இணைக்கப்பட்டுள்ளது. இது மிகவும் பயனுள்ளதாக இருக்கும், ஆனால் ரியாக்டில், ஒரு ஈவென்ட் ஹேண்ட்லர் ஒரு ஸ்டேட் மாறியின் காலாவதியான மதிப்பைப் பிடிக்கும் சூழ்நிலைக்கு இது வழிவகுக்கும். இந்த எளிமைப்படுத்தப்பட்ட உதாரணத்தைக் கவனியுங்கள்:
import React, { useState, useEffect } from 'react';
function MyComponent() {
const [count, setCount] = useState(0);
useEffect(() => {
const intervalId = setInterval(() => {
setCount(count + 1); // Captures the initial value of 'count'
}, 1000);
return () => clearInterval(intervalId);
}, []); // Empty dependency array
const handleClick = () => {
alert(`Count is: ${count}`); // Also captures the initial value of 'count'
};
return (
<div>
<p>Count: {count}</p>
<button onClick={handleClick}>Show Count</button>
</div>
);
}
export default MyComponent;
இந்த எடுத்துக்காட்டில், `setInterval` கால்பேக் மற்றும் `handleClick` செயல்பாடு கூறு ஏற்றப்படும்போது `count` (இது 0) இன் ஆரம்ப மதிப்பைப் பிடிக்கின்றன. `setInterval` மூலம் `count` புதுப்பிக்கப்பட்டாலும், `handleClick` செயல்பாடு எப்போதும் "Count is: 0" என்று காண்பிக்கும், ஏனெனில் அது அசல் மதிப்பைப் பயன்படுத்துகிறது. இது ஒரு பழைய குளோசரின் சிறந்த எடுத்துக்காட்டு.
தேவையற்ற மறு-ரெண்டர்கள்
ஒரு ஈவென்ட் ஹேண்ட்லர் செயல்பாடு ஒரு கூறுகளின் ரெண்டர் முறைக்குள் இன்லைனாக வரையறுக்கப்படும்போது, ஒவ்வொரு ரெண்டரிலும் ஒரு புதிய செயல்பாட்டு நிகழ்வு உருவாக்கப்படுகிறது. இது, ஹேண்ட்லரின் தர்க்கம் மாறாவிட்டாலும் கூட, ஈவென்ட் ஹேண்ட்லரை ஒரு ப்ராப்பாகப் பெறும் துணை கூறுகளின் தேவையற்ற மறு-ரெண்டர்களைத் தூண்டக்கூடும். இதைக் கவனியுங்கள்:
import React, { useState, memo } from 'react';
const ChildComponent = memo(({ onClick }) => {
console.log('ChildComponent re-rendered');
return <button onClick={onClick}>Click Me</button>;
});
function ParentComponent() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
};
return (
<div>
<p>Count: {count}</p>
<ChildComponent onClick={handleClick} />
</div>
);
}
export default ParentComponent;
`ChildComponent` ஆனது `memo`-வில் சுற்றப்பட்டிருந்தாலும், `ParentComponent` ஒவ்வொரு முறை மறு-ரெண்டர் ஆகும்போதும் அதுவும் மறு-ரெண்டர் ஆகும், ஏனெனில் `handleClick` ப்ராப் ஒவ்வொரு ரெண்டரிலும் ஒரு புதிய செயல்பாட்டு நிகழ்வாகும். இது சிக்கலான துணை கூறுகளுக்கு செயல்திறனை எதிர்மறையாக பாதிக்கலாம்.
useEvent அறிமுகம்: ஒரு நிலைப்படுத்தல் அல்காரிதம்
`useEvent` ஹூக் (அல்லது இதே போன்ற ஒரு நிலைப்படுத்தல் அல்காரிதம்) ஈவென்ட் ஹேண்ட்லர்களுக்கு நிலையான குறிப்புகளை உருவாக்குவதற்கான ஒரு வழியை வழங்குகிறது, பழைய குளோசர்களைத் தடுத்து தேவையற்ற மறு-ரெண்டர்களைக் குறைக்கிறது. இதன் முக்கிய யோசனை, *சமீபத்திய* ஈவென்ட் ஹேண்ட்லர் செயலாக்கத்தை வைத்திருக்க `useRef`-ஐப் பயன்படுத்துவதாகும். இது, ஈவென்ட் தூண்டப்படும்போது மிகச் சமீபத்திய தர்க்கத்தை செயல்படுத்தும்போது, கூறு ஹேண்ட்லருக்கு ஒரு நிலையான குறிப்பைக் கொண்டிருக்க அனுமதிக்கிறது (மறு-ரெண்டர்களைத் தவிர்க்கிறது).
`useEvent` என்பது ஒரு உள்ளமைக்கப்பட்ட ரியாக்ட் ஹூக் இல்லை என்றாலும் (ரியாக்ட் 18 வரை), இது தற்போதுள்ள ரியாக்ட் ஹூக்குகளைப் பயன்படுத்தி செயல்படுத்தக்கூடிய ஒரு பொதுவாகப் பயன்படுத்தப்படும் வடிவமாகும். பல சமூக நூலகங்கள் ஆயத்த `useEvent` செயலாக்கங்களை வழங்குகின்றன (எ.கா., `use-event-listener` மற்றும் போன்றவை). இருப்பினும், அதன் அடிப்படை செயலாக்கத்தைப் புரிந்துகொள்வது முக்கியம். இங்கே ஒரு அடிப்படை செயலாக்கம் உள்ளது:
import { useRef, useCallback } from 'react';
function useEvent(handler) {
const handlerRef = useRef(handler);
// Keep the handler ref up to date.
useRef(() => {
handlerRef.current = handler;
}, [handler]);
// Wrap the handler in a useCallback to avoid re-creating the function on every render.
return useCallback((...args) => {
// Call the latest handler.
handlerRef.current(...args);
}, []);
}
export default useEvent;
விளக்கம்:
- `handlerRef`:** ஒரு `useRef` ஆனது `handler` செயல்பாட்டின் சமீபத்திய பதிப்பைச் சேமிக்கப் பயன்படுகிறது. `useRef` ஆனது, அதன் `current` ப்ராப்பர்ட்டி மாற்றியமைக்கப்படும்போது மறு-ரெண்டர்களை ஏற்படுத்தாமல், ரெண்டர்கள் முழுவதும் நீடிக்கும் ஒரு மாற்றக்கூடிய பொருளை வழங்குகிறது.
- `useEffect`:** `handler`-ஐ ஒரு சார்புநிலையாகக் கொண்ட `useEffect` ஹூக், `handler` செயல்பாடு மாறும்போதெல்லாம் `handlerRef.current` புதுப்பிக்கப்படுவதை உறுதி செய்கிறது. இது ரெஃப்பை சமீபத்திய ஹேண்ட்லர் செயலாக்கத்துடன் புதுப்பித்த நிலையில் வைத்திருக்கிறது. இருப்பினும், அசல் குறியீட்டில் `useEffect`-க்குள் ஒரு சார்புநிலை சிக்கல் இருந்தது, இது `useCallback`-இன் தேவைக்கு வழிவகுத்தது.
- `useCallback`:** இது `handlerRef.current`-ஐ அழைக்கும் ஒரு செயல்பாட்டைச் சுற்றி சுற்றப்பட்டுள்ளது. வெற்று சார்புநிலை வரிசை (`[]`) இந்த கால்பேக் செயல்பாடு கூறுகளின் ஆரம்ப ரெண்டரின் போது ஒரு முறை மட்டுமே உருவாக்கப்படுவதை உறுதி செய்கிறது. இதுதான் துணை கூறுகளில் தேவையற்ற மறு-ரெண்டர்களைத் தடுக்கும் நிலையான செயல்பாட்டு அடையாளத்தை வழங்குகிறது.
- திருப்பியனுப்பப்பட்ட செயல்பாடு:** `useEvent` ஹூக் ஒரு நிலையான கால்பேக் செயல்பாட்டைத் திருப்பி அனுப்புகிறது, அது செயல்படுத்தப்படும்போது, `handlerRef`-இல் சேமிக்கப்பட்ட `handler` செயல்பாட்டின் சமீபத்திய பதிப்பை இயக்குகிறது. `...args` தொடரியல், ஈவென்ட் மூலம் அனுப்பப்படும் எந்த வாதங்களையும் கால்பேக் ஏற்க அனுமதிக்கிறது.
நடைமுறையில் `useEvent`-ஐப் பயன்படுத்துதல்
முந்தைய உதாரணங்களை மீண்டும் பார்த்து, சிக்கல்களைத் தீர்க்க `useEvent`-ஐப் பயன்படுத்துவோம்.
பழைய குளோசர்களைச் சரிசெய்தல்
import React, { useState, useEffect, useCallback } from 'react';
function useEvent(handler) {
const handlerRef = React.useRef(handler);
React.useLayoutEffect(() => {
handlerRef.current = handler;
}, [handler]);
return React.useCallback((...args) => {
// @ts-expect-error because arguments might be incorrect
return handlerRef.current(...args);
}, []);
}
function MyComponent() {
const [count, setCount] = useState(0);
const [alertCount, setAlertCount] = useState(0);
useEffect(() => {
const intervalId = setInterval(() => {
setCount(prevCount => prevCount + 1);
}, 1000);
return () => clearInterval(intervalId);
}, []);
const handleClick = useEvent(() => {
setAlertCount(count);
alert(`Count is: ${count}`);
});
return (
<div>
<p>Count: {count}</p>
<button onClick={handleClick}>Show Count</button>
<p>Alert Count: {alertCount}</p>
</div>
);
}
export default MyComponent;
இப்போது, `handleClick` ஒரு நிலையான செயல்பாடாக உள்ளது, ஆனால் அது அழைக்கப்படும்போது, அது ரெஃப் மூலம் `count`-இன் மிகச் சமீபத்திய மதிப்பை அணுகுகிறது. இது பழைய குளோசர் சிக்கலைத் தடுக்கிறது.
தேவையற்ற மறு-ரெண்டர்களைத் தடுத்தல்
import React, { useState, memo, useCallback } from 'react';
function useEvent(handler) {
const handlerRef = React.useRef(handler);
React.useLayoutEffect(() => {
handlerRef.current = handler;
}, [handler]);
return React.useCallback((...args) => {
// @ts-expect-error because arguments might be incorrect
return handlerRef.current(...args);
}, []);
}
const ChildComponent = memo(({ onClick }) => {
console.log('ChildComponent re-rendered');
return <button onClick={onClick}>Click Me</button>;
});
function ParentComponent() {
const [count, setCount] = useState(0);
const handleClick = useEvent(() => {
setCount(count + 1);
});
return (
<div>
<p>Count: {count}</p>
<ChildComponent onClick={handleClick} />
</div>
);
}
export default ParentComponent;
`handleClick` இப்போது ஒரு நிலையான செயல்பாட்டு குறிப்பாக இருப்பதால், `ChildComponent` அதன் ப்ராப்ஸ் *உண்மையில்* மாறும்போது மட்டுமே மறு-ரெண்டர் ஆகும், இது செயல்திறனை மேம்படுத்துகிறது.
மாற்று செயலாக்கங்கள் மற்றும் கருத்தில் கொள்ள வேண்டியவை
`useLayoutEffect` உடன் `useEvent`
சில சந்தர்ப்பங்களில், `useEvent` செயலாக்கத்திற்குள் `useEffect`-க்கு பதிலாக `useLayoutEffect`-ஐப் பயன்படுத்த வேண்டியிருக்கலாம். `useLayoutEffect` அனைத்து DOM மாற்றங்களுக்கும் பிறகு ஒத்திசைவாக செயல்படுகிறது, ஆனால் உலாவி வரைவதற்கு வாய்ப்பு கிடைப்பதற்கு முன்பு. ஈவென்ட் ஹேண்ட்லர், ஈவென்ட் தூண்டப்பட்ட உடனேயே DOM-ஐப் படிக்க அல்லது மாற்ற வேண்டியிருந்தால் இது முக்கியமானது. இந்தச் சரிசெய்தல் உங்கள் ஈவென்ட் ஹேண்ட்லருக்குள் மிகச் சமீபத்திய DOM நிலையைப் பிடிப்பதை உறுதிசெய்கிறது, உங்கள் கூறு காண்பிப்பதற்கும் அது பயன்படுத்தும் தரவிற்கும் இடையே ஏற்படக்கூடிய முரண்பாடுகளைத் தடுக்கிறது. `useEffect` மற்றும் `useLayoutEffect` ஆகியவற்றுக்கு இடையே தேர்ந்தெடுப்பது உங்கள் ஈவென்ட் ஹேண்ட்லரின் குறிப்பிட்ட தேவைகள் மற்றும் DOM புதுப்பிப்புகளின் நேரத்தைப் பொறுத்தது.
import { useRef, useCallback, useLayoutEffect } from 'react';
function useEvent(handler) {
const handlerRef = useRef(handler);
useLayoutEffect(() => {
handlerRef.current = handler;
}, [handler]);
return useCallback((...args) => {
handlerRef.current(...args);
}, []);
}
எச்சரிக்கைகள் மற்றும் சாத்தியமான சிக்கல்கள்
- சிக்கலானது: `useEvent` குறிப்பிட்ட சிக்கல்களைத் தீர்க்கும் அதே வேளையில், இது உங்கள் குறியீட்டிற்கு ஒரு சிக்கலான அடுக்கைச் சேர்க்கிறது. அதை திறம்பட பயன்படுத்த அடிப்படைக் கருத்துக்களைப் புரிந்துகொள்வது முக்கியம்.
- அதிகப்படியான பயன்பாடு: `useEvent`-ஐ கண்மூடித்தனமாகப் பயன்படுத்த வேண்டாம். ஈவென்ட் ஹேண்ட்லர்கள் தொடர்பான பழைய குளோசர்கள் அல்லது தேவையற்ற மறு-ரெண்டர்களை நீங்கள் சந்திக்கும் போது மட்டுமே அதைப் பயன்படுத்துங்கள்.
- சோதனை: `useEvent`-ஐப் பயன்படுத்தும் கூறுகளைச் சோதிக்கும்போது, சரியான ஹேண்ட்லர் தர்க்கம் செயல்படுத்தப்படுகிறதா என்பதை உறுதிப்படுத்த கவனமாக இருக்க வேண்டும். உங்கள் சோதனைகளில் நீங்கள் `useEvent` ஹூக்கை மாலிடம் செய்யவோ அல்லது `handlerRef`-ஐ நேரடியாக அணுகவோ வேண்டியிருக்கலாம்.
ஈவென்ட் கையாளுதலில் உலகளாவிய கண்ணோட்டங்கள்
உலகளாவிய பார்வையாளர்களுக்காக பயன்பாடுகளை உருவாக்கும்போது, ஈவென்ட் கையாளுதலில் கலாச்சார வேறுபாடுகள் மற்றும் அணுகல் தேவைகளைக் கருத்தில் கொள்வது அவசியம்:
- விசைப்பலகை வழிசெலுத்தல்: அனைத்து ஊடாடும் கூறுகளும் விசைப்பலகை வழிசெலுத்தல் மூலம் அணுகக்கூடியவை என்பதை உறுதிப்படுத்தவும். வெவ்வேறு பிராந்தியங்களில் உள்ள பயனர்கள் ஊனம் அல்லது தனிப்பட்ட விருப்பங்கள் காரணமாக விசைப்பலகை வழிசெலுத்தலை நம்பியிருக்கலாம்.
- தொடு ஈவென்ட்கள்: மொபைல் சாதனங்களில் உள்ள பயனர்களுக்காக தொடு ஈவென்ட்களை ஆதரிக்கவும். டெஸ்க்டாப் அணுகலை விட மொபைல் இணைய அணுகல் அதிகமாக உள்ள பகுதிகளைக் கருத்தில் கொள்ளுங்கள்.
- உள்ளீட்டு முறைகள்: சீனம், ஜப்பானியம் மற்றும் கொரிய உள்ளீட்டு முறைகள் போன்ற உலகம் முழுவதும் பயன்படுத்தப்படும் வெவ்வேறு உள்ளீட்டு முறைகளைக் கவனத்தில் கொள்ளுங்கள். ஈவென்ட்கள் சரியாக கையாளப்படுகின்றனவா என்பதை உறுதிப்படுத்த உங்கள் பயன்பாட்டை இந்த உள்ளீட்டு முறைகளுடன் சோதிக்கவும்.
- அணுகல்தன்மை: உங்கள் ஈவென்ட் ஹேண்ட்லர்கள் ஸ்கிரீன் ரீடர்கள் மற்றும் பிற உதவித் தொழில்நுட்பங்களுடன் இணக்கமாக இருப்பதை உறுதிசெய்து, எப்போதும் அணுகல்தன்மை சிறந்த நடைமுறைகளைப் பின்பற்றவும். இது பல்வேறு கலாச்சாரப் பின்னணிகளில் உள்ளடக்க பயனர் அனுபவங்களுக்கு மிகவும் முக்கியமானது.
- நேர மண்டலங்கள் மற்றும் தேதி/நேர வடிவங்கள்: தேதிகள் மற்றும் நேரங்களை உள்ளடக்கிய ஈவென்ட்களைக் கையாளும்போது (எ.கா., திட்டமிடல் கருவிகள், சந்திப்பு காலெண்டர்கள்), வெவ்வேறு பிராந்தியங்களில் பயன்படுத்தப்படும் நேர மண்டலங்கள் மற்றும் தேதி/நேர வடிவங்களைக் கவனத்தில் கொள்ளுங்கள். பயனர்கள் தங்கள் இருப்பிடத்தின் அடிப்படையில் இந்த அமைப்புகளைத் தனிப்பயனாக்க விருப்பங்களை வழங்கவும்.
`useEvent`-க்கு மாற்றுகள்
`useEvent` ஒரு சக்திவாய்ந்த நுட்பமாக இருந்தாலும், ரியாக்டில் ஈவென்ட் ஹேண்ட்லர்களை நிர்வகிக்க மாற்று அணுகுமுறைகள் உள்ளன:
- ஸ்டேட்டை உயர்த்துதல்: சில நேரங்களில், ஈவென்ட் ஹேண்ட்லர் சார்ந்திருக்கும் ஸ்டேட்டை ஒரு உயர்-நிலை கூறுக்கு உயர்த்துவதே சிறந்த தீர்வாகும். இது ஈவென்ட் ஹேண்ட்லரை எளிதாக்கி, `useEvent`-இன் தேவையை நீக்கும்.
- `useReducer`:** உங்கள் கூறுகளின் ஸ்டேட் தர்க்கம் சிக்கலானதாக இருந்தால், `useReducer` ஸ்டேட் புதுப்பிப்புகளை மேலும் கணிக்கக்கூடிய வகையில் நிர்வகிக்கவும், பழைய குளோசர்களின் வாய்ப்பைக் குறைக்கவும் உதவும்.
- கிளாஸ் கூறுகள்: நவீன ரியாக்டில் குறைவாகப் பொதுவானதாக இருந்தாலும், கிளாஸ் கூறுகள் ஈவென்ட் ஹேண்ட்லர்களை கூறு நிகழ்வுடன் பிணைக்க ஒரு இயற்கையான வழியை வழங்குகின்றன, இது குளோசர் சிக்கலைத் தவிர்க்கிறது.
- சார்புநிலைகளுடன் கூடிய இன்லைன் செயல்பாடுகள்: ஈவென்ட் ஹேண்ட்லர்களுக்கு புதிய மதிப்புகள் அனுப்பப்படுவதை உறுதிசெய்ய, சார்புநிலைகளுடன் கூடிய இன்லைன் செயல்பாட்டு அழைப்புகளைப் பயன்படுத்தவும். ஸ்டேட் மூலம் புதுப்பிக்கப்பட்ட `arg1` மற்றும் `arg2` உடன் `onClick={() => handleClick(arg1, arg2)}` ஒவ்வொரு ரெண்டரிலும் புதிய அநாமதேய செயல்பாட்டை உருவாக்கும், இதனால் புதுப்பிக்கப்பட்ட குளோசர் மதிப்புகளை உறுதி செய்கிறது, ஆனால் `useEvent` தீர்க்கும் தேவையற்ற மறு-ரெண்டர்களை ஏற்படுத்தும்.
முடிவுரை
`useEvent` ஹூக் (நிலைப்படுத்தல் அல்காரிதம்) ரியாக்டில் ஈவென்ட் ஹேண்ட்லர்களை நிர்வகிக்கவும், பழைய குளோசர்களைத் தடுக்கவும் மற்றும் செயல்திறனை மேம்படுத்தவும் ஒரு மதிப்புமிக்க கருவியாகும். அடிப்படைக் கொள்கைகளைப் புரிந்துகொண்டு, எச்சரிக்கைகளைக் கருத்தில் கொண்டு, உலகளாவிய பார்வையாளர்களுக்காக மேலும் வலுவான மற்றும் பராமரிக்கக்கூடிய ரியாக்ட் பயன்பாடுகளை உருவாக்க `useEvent`-ஐ திறம்பட பயன்படுத்தலாம். `useEvent`-ஐப் பயன்படுத்துவதற்கு முன் உங்கள் குறிப்பிட்ட பயன்பாட்டு வழக்கத்தை மதிப்பீடு செய்து மாற்று அணுகுமுறைகளைக் கருத்தில் கொள்ள நினைவில் கொள்ளுங்கள். புரிந்துகொள்ளவும் சோதிக்கவும் எளிதான தெளிவான மற்றும் சுருக்கமான குறியீட்டிற்கு எப்போதும் முன்னுரிமை கொடுங்கள். உலகம் முழுவதும் உள்ள பயனர்களுக்கு அணுகக்கூடிய மற்றும் உள்ளடக்கிய பயனர் அனுபவங்களை உருவாக்குவதில் கவனம் செலுத்துங்கள்.
ரியாக்ட் சுற்றுச்சூழல் அமைப்பு உருவாகும்போது, புதிய வடிவங்களும் சிறந்த நடைமுறைகளும் வெளிவரும். திறமையான ரியாக்ட் டெவலப்பராக மாறுவதற்கு தகவலறிந்து இருப்பதும் வெவ்வேறு நுட்பங்களுடன் பரிசோதனை செய்வதும் அவசியம். உலகளாவிய பார்வையாளர்களுக்காக பயன்பாடுகளை உருவாக்கும் சவால்களையும் வாய்ப்புகளையும் ஏற்றுக்கொண்டு, செயல்பாட்டு ரீதியாகவும் கலாச்சார ரீதியாகவும் உணர்திறன் கொண்ட பயனர் அனுபவங்களை உருவாக்க பாடுபடுங்கள்.